<template>
	<view>
		<fa-navbar :title="$t('activity.order.pay')" :border-bottom="false"></fa-navbar>
		<!-- 图片 -->
		<view class="img">
			<image :src="activity.images" mode=""></image>
		</view>

		<view class="middle">
			<view class="middleTop">
				{{start}}
			</view>

			<view class="middleTitle">
				{{activity.title}}
			</view>
			<view class="walk">

				<view class="Dli">
					{{activity.total_number}}
					<br>
					{{$t('activity.players')}}
				</view>
				<view class="Dli">
					R${{activity.prize_pool}}
					<br>
					{{$t('activity.pot')}}
				</view>
			</view>
			<view class="date">
				{{activity.start_date}} - {{activity.end_date}} · {{activity.weeks}} {{$t('activity.weeks')}}
			</view>

			<view class="moneyText">
				{{$t('activity.bet')}}
			</view>

			<view class="radioGroup">
				<u-radio-group v-model="money" placement="row">
					<u-radio iconSize="16px" size="16px" labelSize="16px" :customStyle="{marginRight: '18px'}"
						v-for="(item, index) in money_list" :key="index" :label="item.name"
						:name="item.name">{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>

			<view class="payBtn" :style="[{backgroundColor:theme.bgColor}]">
				{{$t('activity.order.pay')}}
			</view>
			<view class="tips">
				{{$t('activity.order.tips.1')}} <br><br>
				{{$t('activity.order.tips.2')}}
			</view>


		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				money_list: [],
				activity: {},
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				money: '0',
				inputValue: '', // 用于绑定输入框的值
				start: ''
			};
		},
		onLoad(options) {
			let id = options.id
			this.getActivityDetail(id)
		},
		methods: {
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			getActivityDetail(id) {
				this.$api.activityDetail({
					id: id
				}).then(res => {
					if (res.code == 1) {
						this.money_list = res.data.money_list
						this.money = res.data.money
						this.activity = res.data;
						this.activity.prize_pool = this.activity.prize_pool.toLocaleString("pt-BR")
						this.bet = res.data.money_json.join('-')
						let status = res.data.status
						let days = res.data.days

						if (status == 'started') {
							if (days > 1) {
								this.start = this.$t('activity.join.start.week')
							} else if (days == 1) {
								this.start = this.$t('activity.join.start.today')
							}
						} else if (status == 'unstarted') {
							this.start = this.$t('activity.join.start.days', {
								days: days
							})
						}
					}

				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.img {
		width: 100%;
		height: 180px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.middle {
		width: 100%;
		margin: 0 auto;

		.middleTop {
			display: flex;
			justify-content: center;
			width: 100%;
			color: #1F9F60;
			margin: 20px auto;
			font-size: 15px;
		}

		.middleTitle {
			display: flex;
			justify-content: center;
			width: 100%;
			color: #000000;
			margin: 2px auto;
			font-weight: bold;
			font-size: 22px;
		}

		.walk {
			display: flex;
			justify-content: center;

			.Dli {
				padding: 0 15px;
			}
		}

		.date {
			display: flex;
			justify-content: center;
			width: 100%;
			color: #000000;
			margin: 10px auto;
			font-size: 14px;
		}

		.moneyText {
			text-align: center;
			font-size: 16px;
			margin: 20px auto;
		}

		.radioGroup {
			width: 280px;
			height: 50px;
			margin: 10px auto;
			display: flex;

			// background-color: #1F9F60;
			text-align: center;
			justify-content: center;
		}


		.uInput {
			width: 120px;
			margin: 10px auto;

		}

		.tips {
			width: 280px;
			margin: 20px auto;
			color: darkorange;
		}

		.payBtn {
			width: 300px;
			height: 40px;
			background-color: #1F9F60;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			border-radius: 26px;
			margin: 0 auto;
			margin-top: 30px;
			cursor: pointer;
		}

	}
</style>